<template>
  <view>
    <view class="tn-padding-sm">
      <block v-for="(item, index) in list" :key="index">
        <uni-card class="card" :isFull="true">
          <view style="position: absolute;top: 12rpx;background: #f5f4f2;z-index: 2;">视频编号：{{ item.id }}</view>
          <view class="uni-uploader__file" v-if="item.filePath">
            <view class="uploader_video">
              <tn-button v-if="$route.query.isClosed === '0'" @click="delectVideo(item)" backgroundColor="tn-bg-red"
                         style="position: absolute;z-index: 2;right: 20rpx;top: 16rpx;" fontColor="tn-color-white">删除
              </tn-button>
              <video :src="item.filePath" class="tn-width-full"></video>
            </view>
          </view>
        </uni-card>
      </block>
      <tn-empty mode="list" v-if="isEmpty"></tn-empty>
    </view>

    <view v-if="$route.query.isClosed === '0'" class="add-btn tn-main-gradient-blue tn-shadow-gray" @click="toAdd">
      <view class="tn-icon-add tn-text-xxl"/>
    </view>
  </view>
</template>

<script>
import {delVideo, getVideo, saveVideo, uploadLp} from '@/api/lupeiwenshu.js';
import {getToken} from "@/utils/auth";
import config from "@/config";
import {toast} from "@/utils/common";

export default {
  data() {
    return {
      isEmpty: false,
      list: []
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      getVideo({docId: this.$route.query.id})
          .then((res) => {
            this.list = res.data;
            this.isEmpty = !res.data.length;
          });
    },
    toAdd() {
      // 上传视频
      uni.chooseVideo({
        sourceType: ['album'],
        extension: ['mp4'],
        success: (responent) => {
          let videoFile = responent.tempFilePath;
          uni.showLoading({
            title: '上传中',
            mask: true
          })
          uploadLp({
            filePath: videoFile,
            name: 'file',
          }).then(res => {
            if (res.code === 0) {
              this.saveVideo(res.data.url)
            } else {
              toast(res.msg)
            }
          }).catch(err => {
            toast(err||'上传失败,建议电脑端上传')
          })
        }
      })
    },
    saveVideo(filePath) {
      const video = {
        docId: this.$route.query.id,
        typeName: "现场视频",
        filePath,
      };
      saveVideo(video).then((res) => {
        if (res?.data === 1) {
          this.load();
          // toast("上传成功");
        }
      });
    },
    delectVideo(item) {
      uni.showModal({
        content: "是否要删除此视频",
        success: (res) => {
          if (res.confirm) {
            delVideo({id: item.id}).then((res) => {
              if (res.code === 200) {
                this.load();
                // toast("删除成功");
              }
            })
          }
        }
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.card {
  margin: 0 !important;
  border-radius: 10px;
  margin-top: 15px !important;

  ::v-deep {
    .uni-card__content {
      padding: 0 !important;
      padding-top: 16rpx !important;
    }
  }
}

.add-btn {
  position: fixed;
  right: 40rpx;
  bottom: 100rpx;
  border-radius: 50%;
  padding: 30rpx;
  z-index: 3;
}

</style>
